<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <el-menu
            router
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item :index="item.path" v-for="(item,index) in arr" :key="index">
            <i :class="item.icon"></i>
            <span slot="title">{{item.txt}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data(){
    return {
      arr:[],
    }
  },
  created() {
    this.$router.getRoutes().forEach((item,index) => {
      let obj = {};
      if(item.meta && item.meta.txt){
        obj.path = item.path;
        obj.txt = item.meta.txt;
        obj.icon = item.meta.icon;
        this.arr.push(obj);
      }
    })
  },
}
</script>

<style scoped>
.home{
  width: 100%;
  height: 100%;
  /* background: #eee; */
}
.el-container{
  width: 100%;
  height: 100%;
}
.el-header, .el-footer {
    background-color: #B3C0D1;
}
  
.el-aside {
  background-color: #D3DCE6;
}
.el-menu{
  width: 100%;
  height: 100%;
}
.el-main {
  background-color: #E9EEF3;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
